var contextPath = "/WangWoMusic";
window.onload = function () {
    /* 左侧导航区域 */
    var leftSpans = document.getElementById("leftSide").getElementsByTagName("span");
    var leftImg = document.getElementById("leftSide").getElementsByTagName("img");
    var number = -1;
    var leftNativeImgArr = [contextPath+'/img/house.png', contextPath+'/img/music.png', contextPath+'/img/login.png', contextPath+'/img/register.png', contextPath+'/img/admin.png'];
    var leftImgArr = [contextPath+'/img/house1.png', contextPath+'/img/music1.png', contextPath+'/img/login1.png', contextPath+'/img/register1.png', contextPath+'/img/admin1.png'];
    getOut();

    function getOut() {
        for (var i = 0; i < leftImg.length; i++) {
            leftImg[i].index = i;
            leftImg[i].onmouseover = function () {
                leftSpans[this.index].style.display = "inline-block";
                leftSpans[this.index].style.left = "55px";
                leftImg[this.index].src = leftImgArr[this.index];
            };
            leftImg[i].onmouseout = function () {
                leftSpans[this.index].style.display = "none";
                leftImg[this.index].src = leftNativeImgArr[this.index];
            }
        }
    }

    /*  中间头部区域  */
    var oSearch = document.getElementById("oSearch");

    /*  js控制音乐播放    */
    var playMusic=document.getElementById("playMusic");
    var audioMusic=playMusic.getElementsByTagName("audio")[0];
    var previousMusic=playMusic.getElementsByTagName("img")[0];
    var pauseMusic=playMusic.getElementsByTagName("img")[1];
    var nextMusic=playMusic.getElementsByTagName("img")[2];
    var onOff=true;
    pauseMusic.onclick=function () {
        if (onOff===true){
            audioMusic.play();
            pauseMusic.value="播放";
            pauseMusic.src=contextPath+"/img/pause.png";
            onOff=false;
        }else{
            audioMusic.pause();
            pauseMusic.value="暂停";
            pauseMusic.src=contextPath+"/img/play.png";
            onOff=true;
        }
    };

    /*  去登陆区域  */

    /*  图片轮播    */
    //图片轮播
    var scrollPic =document.getElementById("scrollPic");//轮播 div
    var pic = document.getElementById("pic").getElementsByTagName("li"); //图片列表
    var timer = null;
    var index = 0;
    timer = setInterval(autoPlay, 2000);

    function autoPlay() {
        index++;
        changePic(index % pic.length);
    }
    function changePic(curIndex) {
        for (var i = 0; i < pic.length; i++) {
            pic[i].style.display = "none";
        }
        // 当前图片 对应的 li 要显示
        pic[curIndex].style.display = "block";
    }
    scrollPic.onmouseover = function () {
        clearInterval(timer);
    };
    scrollPic.onmouseout = function () {
        timer = setInterval(autoPlay, 2000);
    };

    /*  鼠标移入 轮播图片，出现 上一张、下一张*/
    var scrollPicDiv=document.getElementById("scrollPic");
    var previous=document.getElementById("previous");
    var next=document.getElementById("next");
    scrollPicDiv.onmouseover=function () {
        previous.style.visibility="visible";
        next.style.visibility="visible";
    };
    scrollPicDiv.onmouseout=function () {
        previous.style.visibility="hidden";
        next.style.visibility="hidden";
    };

    /*  右侧音乐列表区域   */
    var musicUl=document.getElementById("musicUl");
    var oli="";
    var number=1;
    for(var i=0;i<10;i++){
        oli+='<li><a href="">'+number+'.认真的雪</a></li>';
        number++;
    }
    musicUl.innerHTML=oli;
};